import React, { Component } from 'react';
import { Icon, Carousel } from 'antd-mobile';

import './index.scss'
class Index extends Component {
	constructor(props) {
		super(props);
		this.state = {
			data: ['1', '2', '3'],
			imgHeight: 176,
		}
	}
	componentDidMount() {
		document.getElementsByTagName('title')[0].innerHTML = '首页';
		setTimeout(() => {
			this.setState({
				data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
			});
		}, 100);
	}
	render() {
		return (
			<div className="index">
				<div className="top-bar">
					<div className="flex y-center space-around">
						<img src={require('../../images/position2.png')} alt="" className="logo"></img>
						<span>北京</span>
					</div>
					<div className="search">
						<input type="text" placeholder="搜索你想要的"></input>
          	<Icon type="search" size={'md'} className="search-icon"/>
					</div>
					<span><a href="#/search" style={{color: '#fff'}}>搜索</a></span>
				</div>

				<div className="group">
					<div className="carousel">
						<Carousel
							autoplay={false}
							infinite
							beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
							afterChange={index => console.log('slide to', index)}
						>
							{this.state.data.map(val => (
								<a
									key={val}
									href="http://www.alipay.com"
									style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
								>
									<img
										src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
										alt=""
										style={{ width: '100%', verticalAlign: 'top' }}
										onLoad={() => {
											// fire window resize event to change height
											window.dispatchEvent(new Event('resize'));
											this.setState({ imgHeight: 'auto' });
										}}
									/>
								</a>
							))}
						</Carousel>
					</div>
					<div className="category flex y-center space-around">
						<div className="item">
							<div>
								<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531071934317&di=278cf69c485887645927aafd71988efb&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201604%2F23%2F20160423093537_5XRQL.jpeg" alt=""></img>
							</div>
							<div className="category-name">
								让好水进万家
              </div>
						</div>
						<div className="item">
							<div>
								<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531071934317&di=278cf69c485887645927aafd71988efb&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201604%2F23%2F20160423093537_5XRQL.jpeg" alt=""></img>
							</div>
							<div className="category-name">
								让创业更简单
              </div>
						</div>
						<div className="item">
							<div>
							<a href="#/list"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531071934317&di=278cf69c485887645927aafd71988efb&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201604%2F23%2F20160423093537_5XRQL.jpeg" alt=""></img></a>
							</div>
							<div className="category-name">
								好服务到家
              </div>
						</div>
					</div>
				</div>

				<div className="product">
					<div className="title flex y-center space-between">
						<span>净水器</span>
						<div className="more flex y-center">
							<span>更多</span>
							<Icon type="right" size="xs" />
						</div>
					</div>

					<div className="card">
							<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531071934317&di=278cf69c485887645927aafd71988efb&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201604%2F23%2F20160423093537_5XRQL.jpeg" alt=""/>
							<div className="text">
								<div className="text-title">创始人</div>
								<div className="text-detail">内容详情文本</div>
							</div>
					</div>
					<div className="card">
							<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531071934317&di=278cf69c485887645927aafd71988efb&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201604%2F23%2F20160423093537_5XRQL.jpeg" alt=""/>
							<div className="text">
								<div className="text-title">创始人</div>
								<div className="text-detail">内容详情文本</div>
							</div>
					</div>
					<div className="card">
							<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531071934317&di=278cf69c485887645927aafd71988efb&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201604%2F23%2F20160423093537_5XRQL.jpeg" alt=""/>
							<div className="text">
								<div className="text-title">创始人</div>
								<div className="text-detail">内容详情文本</div>
							</div>
					</div>
				</div>


			</div>
		)
	}
}
export default Index;